<template>
  <div class="article">
    <!-- 查询输入框开始 -->
    <el-select size="mini" v-model="value" placeholder="请选择状态">
      <el-option
        v-for="item in option"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <el-input
      placeholder="请输入标题"
      size="mini"
      style="width: 200px; margin: 0 1em"
    ></el-input>
    <el-select size="mini" v-model="value" placeholder="请选择栏目">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <!-- 查询输入框结束 -->
    <!-- 查询按钮开始 -->
    <el-button
      style="margin-bottom: 0.5em; margin-left: 0.5em"
      type="primary"
      size="mini"
      plain
      >查询</el-button
    >
    <!-- 查询按钮结束 -->
    <!-- 发布风采按钮开始 -->
    <el-button
      style="margin-bottom: 0.5em; margin-right: 0.5em"
      type="primary"
      size="mini"
      plain
      >发布风采</el-button
    >
    <!-- 发布风采按钮结束 -->
    <!-- 表格开始 -->
    <el-table :data="article" style="width: 100%; font-size: 12px">
      <el-table-column
        label="序号"
        type="index"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="username"
        label="用户名"
        align="center"
      ></el-table-column>
      <el-table-column prop="realname" label="姓名" align="center">
      </el-table-column>
      <el-table-column
        prop="roles[0].name"
        label="角色"
        align="center"
      ></el-table-column>
      <el-table-column prop="gender" label="性别" align="center">
      </el-table-column>
      <el-table-column prop="status" label="状态" align="center">
      </el-table-column>
      <el-table-column prop="telephone" label="手机号" align="center">
      </el-table-column>
      <el-table-column fixed="right" label="操作" align="center">
        <template slot-scope="scope">
          <span style="cursor: pointer">设置&nbsp;</span>
          <span
            @click="editHandler(scope.row)"
            style="color: #6bb3ff; cursor: pointer"
            >编辑&nbsp;</span
          >
          <span
            @click="deleteHandler(scope.row.id)"
            style="color: #e97382; cursor: pointer"
            >删除&nbsp;</span
          >
          <span style="cursor: pointer">详情</span>
        </template>
      </el-table-column>
    </el-table>
    <!-- 表格结束 -->
  </div>
</template>

<script>
import { mapState,mapActions } from "vuex";
export default {
  data() {
    return {
      option: [
        {
          value: "选项1",
          label: "正常",
        },
        {
          value: "选项2",
          label: "禁用",
        },
      ],
      options: [
        {
          value: "选项1",
          label: "家政百科",
        },
        {
          value: "选项2",
          label: "家政指南",
        },
        {
          value: "选项3",
          label: "家政动态",
        },
      ],
      value: "",
      value1: "",
      radio: "",
      radio1: "",
      list: {
        page: 1,
        pageSize: 10,
      },
    };
  },
  computed: {
    ...mapState("article", ["article", "total"]),
  },
  methods: {
    ...mapActions("article",["findAllArticle"])
  },
  created(){
    this.findAllArticle(this.list)
  }
};
</script>

<style>
</style>
